<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>
		Javascript Audio Processing
	</title>
	<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?autoload=true&amp;skin=sunburst&amp;lang=css" defer="defer"></script>
	<!-- show all line numbers-->
	<style type="text/css">
		body, button {
			font-family:Arial, Helvetica, sans-serif;
			font-size: 16px;
		}
		.prettyprint ol.linenums>li {
			list-style-type: decimal
		}
	</style>
	<script src="../build/maximilian.js"></script>
</head>

<body >
	<div style="display: inline-block;">
		<h1> Nonlinearities</h1>
		<p> Asymetric distortion on saw waves </p>
		<div>
			<pre class="prettyprint lang-js linenums:true" id="quine" style="border:1px solid #88c; width: 750px; float: left;">
let m = maximilian();

let playAudio = () => {

	let myOsc = new m.maxiOsc();
	let lfo1 = new m.maxiOsc();
	let lfo2 = new m.maxiOsc();
	let maxiAudio = new m.maxiAudio();
	let dist = new m.maxiNonlinearity();

	maxiAudio.init();

	maxiAudio.play = function () {
		let w = myOsc.saw(50);
		w = dist.asymclip(w*50, lfo1.sinewave(0.5) * 3, lfo2.coswave(0.6) * 3);
		return w;
	}
}
		  </pre>
	  </div>
	  <button id="playButton">Play</button>
  </div>
	</body>

<!-- Our javascript code -->
<script type="text/javascript">
	async function maxi(){
		let m = await maximilian();
			console.log(m);


			/**
			 * maxiAudio.init() initialises the Audio Context and should execute in a button click event handler to prevent the console warning
			 * "The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu"
			 */
			let playAudio = () => {


				let myOsc = new m.maxiOsc();
				let lfo1 = new m.maxiOsc();
				let lfo2 = new m.maxiOsc();
				let maxiAudio = new m.maxiAudio();
				let dist = new m.maxiNonlinearity();

				maxiAudio.init();

				maxiAudio.play = function () {
					let w = myOsc.saw(50);
					w = dist.asymclip(w*50, lfo1.sinewave(0.5) * 3, lfo2.coswave(0.6) * 3);
					return w;
				}
			}

			const playButton = document.getElementById('playButton');
			playButton.addEventListener("click", () => playAudio());

	 };

	 maxi();

</script>
</html>
